<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ page import="com.noteit.bean.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NoteIT -Modify-</title>
<link href="${pageContext.request.contextPath}/css/main.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/main.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/css/displaytag_manage.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/jscal2/jscal2.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/jscal2/border-radius.css" />
<link id="skin-steel" title="Steel" type="text/css" rel="alternate stylesheet" href="${pageContext.request.contextPath}/css/jscal2/steel/steel.css" />
<link id="skinhelper-compact" type="text/css" rel="alternate stylesheet" href="${pageContext.request.contextPath}/css/jscal2/reduce-spacing.css" />
<script language="JavaScript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.metadata.js"></script>
<script src="${pageContext.request.contextPath}/js/jscal2/jscal2.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/js/jscal2/lang/en.js"></script>
<!-- uploadify start -->
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/uploadify.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/swfobject.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.uploadify.v2.1.4.js"></script> 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAG_4i2swR3KOd-nGYrlrt8RTkyS8SRe_kYPTAbwTumvAqao01PRRUcCtCzTBnNH2kRURGR8RhQQoZ3w"
      type="text/javascript">
</script>
<!--ready事件-->  
<script type="text/javascript">  
function aaa() {
    $("#uploadify").uploadify({
       'uploader' : '${pageContext.request.contextPath}/js/uploadify.swf',  
       'script' : '${pageContext.request.contextPath}/aaa/Upload',//后台处理的请求  
       'cancelImg' : '${pageContext.request.contextPath}/images/cancel.png',  
       'folder' : 'uploads',//您想将文件保存到的路径 
       'queueID' : 'fileQueue',//与下面的id对应 
       'queueSizeLimit' : 5,  
       'fileDesc' : '*.jpg',  
       'fileExt' : '*.jpg;*.png;*.gif', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc  
       'auto' : false,  
       'multi' : false,
       'sizeLimit' : 305000, //單位：KB
       'simUploadLimit' : 1,  
       'buttonText' : 'Add Image',
       'displayData': 'speed',
       'wmode' : 'transparent',
       'method' : 'get',
       'scriptData' : {
			'userEmail' : document.getElementById('userName').value
		},
		'onError' : function(event, queueId, fileObj, errorObj) {
			var info = errorObj.info;
			if (info == '305000')
				alert("Fail：Image size should be below 300KB");
			else
				alert("Fail：" + info);
		},
       onComplete: function (event, queueID, fileObj, response, data) {
       	 alert("Upload success");
       	 document.getElementById('picture').value = response.toString();
           
       },
   });  
    
}  
</script>
<script type="text/javascript">
	function delete_confirm_image() {
		var checkUploadedOrNot = document.getElementById('picture').value;
		
		if(checkUploadedOrNot!=null && checkUploadedOrNot.length>0){
			document.location.reload(true);
			$('#form1').attr('action','${pageContext.request.contextPath}/noteit/DeleteUploadImageAction.do');
			$('#form1').submit();
			document.getElementById('picture').value = '';
			
		}else{
			//清空頁面上的值
			document.getElementById('picture').value = '';
		}
	}
</script>
<style type="text/css">
	.style1 {
		font-family: Verdana, Arial, Helvetica, sans-serif
	}
	#pkilogin {
		color: #F00;
		text-decoration: underline;
		text-align: center;
	}
</style>
<script type="text/javascript">
	function delete_confirm() {
		var r = confirm("Are you sure to Delete?");
		if (r == true) {
			$('#form1').attr('action',
					'${pageContext.request.contextPath}/noteit/DeleteNoteitAction.do');
			$('#form1').submit();
			alert("Delete successful");
		} 
	}
	function update_confirm() {
		$('#form1').attr('action',
				'${pageContext.request.contextPath}/noteit/ModifyNoteitAction.do');
		$('#form1').submit();
		alert("Update successful");
	}
</script>
<script type="text/javascript">
var myMap;
var myMarker;
var myLocArr = new Array();
var myLocation;
function load() {
	if (GBrowserIsCompatible()) {
		myMap = new GMap2(document.getElementById("my_map"));
		myLocation = document.getElementById('location').value;
		myLocArr = myLocation.split(",");
		//alert(myLocArr[0]);
		//alert(myLocArr[1]);
		var myLatLng = new GLatLng(myLocArr[0], myLocArr[1]);
		myMap.setCenter(myLatLng, 15);
		myMap.addControl(new GLargeMapControl());
		document.getElementById('inLatLng').value = myLatLng.toString();
		//document.getElementById('inLat').value = myLatLng.lat();
		//document.getElementById('inLng').value = myLatLng.lng();		
		
		myMarker = new GMarker( myLatLng );
		myMap.addOverlay( myMarker );
	}
}

function addressGps() {
	var myGeocoder = new GClientGeocoder();
	var address = document.getElementById('address').value;
	myGeocoder.getLatLng(address, function getRequest( point ){
							if(!point){
								alert('這個地址 Google 說不知道！');
							}else{
								//移動地圖中心點
								myMap.panTo( point );
								//設定標註座標
								myMarker.setLatLng(point);
								document.getElementById('inLatLng').value = point.toString();
								document.getElementById('inLat').value = point.lat();
								document.getElementById('inLng').value = point.lng();
							}
						});
}
</script>
</head>
<body onload="aaa();load()">
<div id="grailsLogo"><a href="#"><img src="${pageContext.request.contextPath}/images/grails_logo_t.jpgx" alt="WORDS POOL" border="0" /></a></div>
<jsp:include page="/menus_general.jsp"></jsp:include>
<br><br>
<div class="path">PATH：NoteIT &gt; WordsPool &gt; Modify-</div>


<div class="body">
<!-- end of Tabs--> 

<div id="errMsg">
<font color="red">
<ul></ul>
</font>
</div>

<!-- end of Tabs  ACTION="ModifyNoteitAction.do" -->
<div class="body">
<h1>Modify</h1>

<div class="dialog">
<form ACTION="" METHOD="POST" name="form1" id="form1" enctype="multipart/form-data">
<input type="hidden" name="checkDataIsNew" id="checkDataIsNew" value="N" />
<input type="hidden" name="userName" id="userName" value="<%= session.getAttribute("loggedInUser").toString()%>" />
<table width="800">
  <s:hidden name="checkDataIsNew" id="checkDataIsNew" value="N"></s:hidden>
  <s:hidden theme="simple" name="id" id="id" value="%{ni.id}"/>
  <s:hidden theme="simple" name="createdate" id="createdate" value="%{ni.createdate}"/>
  <tr>
    <th>English：</th>
    <td width="200" >
      <s:textfield theme="simple" name="englishE" id="englishE"  size="100" value="%{ni.englishE}" maxlength="100" />
    </td>
  </tr>
  <tr>
    <th>音譯：</th>
    <td width="152" >
      <s:textfield theme="simple" name="english" id="english"  size="100" value="%{ni.english}" maxlength="100" />
    </td>
  </tr>
  <tr>
    <th>繁體中文：</th>
    <td width="200" >
      <s:textfield theme="simple" name="chinese" id="chinese"  size="100" value="%{ni.chinese}" maxlength="100" />
    </td>
  </tr>
  <tr>
    <th>ひらがな：</th>
    <td width="152">
      <s:textfield theme="simple" name="japanese" id="japanese" size="100" value="%{ni.japanese}" maxlength="100" />
    </td>
  </tr>
  <tr>
    <th>カタカナ：</th>
    <td width="152">
      <s:textfield theme="simple" name="japaneses" id="japaneses" size="100" value="%{ni.japaneses}" maxlength="100" />
    </td>
  </tr>
  <tr>
    <th>詞性：</th>
    <td width="152">
      <s:textfield theme="simple" name="property" id="property" size="100" value="%{ni.property}" maxlength="100" />
    </td>
  </tr>
  <tr>
    <th>Sentance：</th>
    <td width="152">
      <s:textfield theme="simple" name="sentence" id="sentence" size="100" value="%{ni.sentence}" maxlength="100" />
    </td>
  </tr>
  <tr>
    <th>Importance：</th>
    <td width="152">
      <s:textfield theme="simple" name="importance" id="importance" size="1" value="%{ni.importance}" maxlength="1" />
    </td>
  </tr>
  <tr>
    <th>Create Date：</th>
    <td width="152">
      <s:property value="%{ni.createdate}" />
    </td>
  </tr>
  <tr>
    <th>Update Date：</th>
    <td width="152">
      <s:property value="%{ni.updatedate}" />
    </td>
  </tr>
  <tr>
    <th>Picture：</th>
    <td width="152">
      <c:choose>
        <c:when test="${ni.picture == null}">
            <font color='red' >*The image size should be below 300KB</font>
            <a href="http://www.picresize.com/" target="_blank">[Click to Resize image]</a>
            <div id="fileQueue" style="display: true;"></div>
        	<input type="file" name="uploadify" id="uploadify" />  
        	<p>  
            	<a href="javascript:jQuery('#uploadify').uploadifyUpload()">Upload</a>   
            	<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">Cancel</a>  
            	<input type="button" onclick="delete_confirm_image()" value="Delete Image" />
        	</p>
        	<input name="picture" id="picture"  size="100" maxlength="100"/>
        	<br/>
        </c:when>
        <c:otherwise>
            <s:hidden theme="simple" name="picture" id="picture" value="%{ni.picture}" />
            <img src="/NoteITService/showImageServlet?id=${ni.picture}">
      		<br/>
      		<input type="button" onclick="delete_confirm_image()" value="Delete Image" />
      		
        </c:otherwise>
      
      </c:choose>
    </td>
  </tr>
  <tr>
    <th>Location：</th>
    <td width="200" colspan="3">
        <div class="dialog">
        <s:hidden theme="simple" name="location" id="location" value="%{ni.location}"/>
		Address︰<input id="address" name="address" type="text" size="40" value="" />
		<input name="button" type="button" value="Modity Location" onclick="javascript:addressGps();" />
		<br>
		LatLng︰<input id="inLatLng" name="inLatLng" type="text" size="40" value="" readOnly="true" />
		<!-- <br>
		Lat︰<input id="inLat" name="inLat" type="text" size="20" value="" />
		<br>
		Lng︰<input id="inLng" name="inLng" type="text" size="20" value="" /> -->
		<p>
		<div id="my_map" style="width: 500px; height: 270px"></div>
		</div>
    </td>
  </tr>
  <tr>
    <td align="center" colspan="6">
    <s:submit cssClass="comfirm" value="Update" theme="simple" onclick="update_confirm()"/>
    <input type="button" value="Recovery" onClick="document.location.reload(true)" Class="buttonBlue"/>
    <input type="button" value="Cancel" onClick="document.location.href='${pageContext.request.contextPath}/noteit/WordsPoolAction.do'" class="buttonBlue"/>
    <input type="button" class="buttonBlue" onclick="delete_confirm()" value="Delete" />
    </td>
  </tr>
</table>

</form>
</div>
</div>
</div>
</body>
</html>
 